<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Leaflet 按类型控制图层显示隐藏</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            width: 100%;
            height: 100%;
        }
        #controls {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 1000; /* 确保控件在地图上方 */
            background-color: white;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        #controls label {
            display: block;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <div id="controls">
        <label><input type="checkbox" id="toggleTypeA" checked> 显示 Type A 点</label>
        <label><input type="checkbox" id="toggleTypeB" checked> 显示 Type B 点</label>
    </div>

    <script>
        // 创建地图实例
        var map = L.map('map', {
            center: [30, 110], // 地图中心点
            zoom: 4 // 适当的缩放级别
        });


        // 创建图层组来按类型存放标记点
        var typeALayers = L.layerGroup().addTo(map); // 默认添加到地图
        var typeBLayers = L.layerGroup().addTo(map); // 默认添加到地图

        // 示例数据点 (包含类型信息)
        var points = [
            { lat: 39.9042, lon: 116.4074, type: 'A', name: '北京' },
            { lat: 31.2304, lon: 121.4737, type: 'B', name: '上海' },
            { lat: 23.1291, lon: 113.2644, type: 'A', name: '广州' },
            { lat: 22.5431, lon: 114.0579, type: 'A', name: '深圳' },
            { lat: 39.0835, lon: 117.2009, type: 'B', name: '天津' }
        ];

        // 遍历数据点，创建标记并添加到对应的图层组
        points.forEach(function(point) {
            var marker = L.marker([point.lat, point.lon]).bindPopup(point.name);
            if (point.type === 'A') {
                marker.addTo(typeALayers);
            } else if (point.type === 'B') {
                marker.addTo(typeBLayers);
            }
        });

        // 获取复选框元素
        var toggleTypeA = document.getElementById('toggleTypeA');
        var toggleTypeB = document.getElementById('toggleTypeB');

        // 添加事件监听器来控制图层组显示隐藏
        toggleTypeA.addEventListener('change', function() {
            if (this.checked) {
                typeALayers.addTo(map); // 显示Type A图层组
            } else {
                typeALayers.remove(); // 隐藏Type A图层组
            }
        });

        toggleTypeB.addEventListener('change', function() {
            if (this.checked) {
                typeBLayers.addTo(map); // 显示Type B图层组
            } else {
                typeBLayers.remove(); // 隐藏Type B图层组
            }
        });

        // 确保初始状态正确
        if (!toggleTypeA.checked) {
            typeALayers.remove();
        }
        if (!toggleTypeB.checked) {
            typeBLayers.remove();
        }

    </script>
</body>
</html> 